<template>
  <div class="demo">
    <div class="demo-title">基本使用</div>
    <div class="demo-content">
      <AutoComplete
        v-model:value="value"
        :options="options"
        style="width: 200px"
        placeholder="input here"
        @select="onSelect"
        @search="onSearch"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import AutoComplete from '@sscd/auto-complete';
  interface MockVal {
    value: string;
  }
  const mockVal = (str: string, repeat = 1) => {
    return { value: str.repeat(repeat) };
  };
  const value = ref('');
  const options = ref<MockVal[]>([]);
  const onSearch = (val: string) => {
    options.value = !val ? [] : [mockVal(val), mockVal(val, 2), mockVal(val, 3)];
  };
  const onSelect = (val) => {
    console.log('onSelect', val);
  };
  watch(
    () => value,
    (val) => console.log('value', val.value)
  );
</script>
